<template>
  <div>

    <ul>
      <li v-for="(item,i) in news" :key="i">{{ item }} --> {{ i }}</li>
    </ul>

    <ul>
      <li v-for="(item,i) in news_1" :key="i">{{ item.title }} -- {{ item.tag }} -- {{ item.num }} --> {{ i }}</li>
    </ul>

    <ul>
      <li v-for="(item,i) in news_2" :key="i">{{ item }} --> {{ i }}</li>
    </ul>

    <ul>
      <li v-for="(item,i) of news_2" :key="i">{{ item }} --> {{ i }}</li>
    </ul>
  </div>
</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      news: [
        '中美高层会晤将在瑞士举行',
        '31省区市新增确诊26例 本土2例',
        '俄罗斯或将关闭所有美国驻俄使领馆',
        '美国今年新冠死亡人数已超去年总和'
      ],
      news_1: [
        {
          title: '中美高层会晤将在瑞士举行',
          tag: '1',
          num: '45'
        },
        {
          title: '31省区市新增确诊26例 本土2例',
          tag: '2',
          num: '450'
        },
        {
          title: '俄罗斯或将关闭所有美国驻俄使领馆',
          tag: '3',
          num: '415'
        },
        {
          title: '美国今年新冠死亡人数已超去年总和',
          tag: '4',
          num: '145'
        }
      ],
      news_2: {
        name: '小明',
        age: 10,
        sex: '男'
      }

    }
  },
  methods: {
    toggleUser() {
      this.user = 'vip'
    },
    toggleShow() {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>